<template>
    <div class="platform-settings">
      <div class="content">
        <div class="settings-form">
          <div class="section">
            <div class="section-title">基本信息 <span class="required">*为必填项</span></div>
            <el-form :model="basicForm" label-width="100px">
              <el-form-item label="平台名称：" required>
                <el-input v-model="basicForm.platformName" placeholder="请输入平台名称"></el-input>
              </el-form-item>
              <el-form-item label="客服电话：" required>
                <el-input v-model="basicForm.phone" placeholder="请输入客服电话"></el-input>
              </el-form-item>
              <el-form-item label="版权信息：">
                <el-input v-model="basicForm.copyright" placeholder="请输入版权信息"></el-input>
              </el-form-item>
              <el-form-item label="关于我们：">
                <el-input type="textarea" v-model="basicForm.about" 
                          :rows="4" placeholder="请输入描述文案"></el-input>
              </el-form-item>
            </el-form>
          </div>
  
          <div class="section">
            <div class="section-title">材料邮寄地址 <span class="required">*为必填项</span></div>
            <el-form :model="addressForm" label-width="100px">
              <el-form-item label="收货人姓名：" required>
                <el-input v-model="addressForm.receiverName" placeholder="请输入收货人姓名"></el-input>
              </el-form-item>
              <el-form-item label="收货人电话：" required>
                <el-input v-model="addressForm.receiverPhone" placeholder="请输入收货人电话"></el-input>
              </el-form-item>
              <el-form-item label="收货人地址：" required>
                <el-input v-model="addressForm.address" placeholder="请输入收货人地址"></el-input>
              </el-form-item>
            </el-form>
          </div>
  
          <div class="form-actions">
            <el-button type="primary" @click="saveSettings">确定</el-button>
            <el-button @click="resetForm">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PlatformSettings',
    data() {
      return {
        basicForm: {
          platformName: '',
          phone: '',
          copyright: '',
          about: ''
        },
        addressForm: {
          receiverName: '',
          receiverPhone: '',
          address: ''
        }
      }
    },
    methods: {
      saveSettings() {
        // 验证必填项
        if (!this.basicForm.platformName || !this.basicForm.phone ||
            !this.addressForm.receiverName || !this.addressForm.receiverPhone ||
            !this.addressForm.address) {
          this.$message.error('请填写所有必填项')
          return
        }
        // TODO: 调用API保存设置
        this.$message.success('保存成功')
      },
      resetForm() {
        this.basicForm = {
          platformName: '',
          phone: '',
          copyright: '',
          about: ''
        }
        this.addressForm = {
          receiverName: '',
          receiverPhone: '',
          address: ''
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .platform-settings {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
  }
  
  .section {
    margin-bottom: 32px;
  }
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .required {
    font-size: 12px;
    color: #DC2626;
    font-weight: normal;
  }
  
  .settings-form {
    max-width: 800px;
  }
  
  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
  }
  
  :deep(.el-input) {
    max-width: 400px;
  }
  
  :deep(.el-textarea) {
    max-width: 600px;
  }
  
  .form-actions {
    margin-top: 32px;
  }
  
  :deep(.el-button--primary) {
    background-color: #8B5CF6;
    border-color: #8B5CF6;
  }
  
  :deep(.el-button--primary:hover) {
    background-color: #7C3AED;
    border-color: #7C3AED;
  }
  </style>